var c = document.getElementById('c');
var ctx = c.getContext('2d');
c.width = window.innerWidth * window.devicePixelRatio;
c.height = window.innerHeight * window.devicePixelRatio;
var cx = c.width / 2;
var cy = c.height / 2;

function createCanvasLoading (){
    var rad = Math.PI * 2 / 100,
        speed = {v: 1};

    function blueCircle(n) {
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = '#49f';
        ctx.lineWidth = 12;
        ctx.arc(cx, cy, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
        ctx.stroke();
        ctx.restore();
    }

    function whiteCircle() {
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = "#A5DEF1";
        ctx.lineWidth = 12;
        ctx.arc(cx, cy, 100 , 0, Math.PI*2, false);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }

    function text(n) {
        ctx.save();
        ctx.fillStyle = '#F47C7C';
        ctx.font = '40px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(n.toFixed(0) + '%', cx, cy);
        ctx.restore();
    }

    new TWEEN.Tween(speed).to({v: 100}, 3000).easing(TWEEN.Easing.Cubic.In).onUpdate(function(obj) {
        ctx.clearRect(0, 0, c.width, c.height);
        whiteCircle();
        text(obj.v);
        blueCircle(obj.v);
    }).start();

    //帧循环
    (function drawFrame() {
        var id = requestAnimationFrame(drawFrame);
        var result = TWEEN.update();
        if(!result) cancelAnimationFrame(id);
    })()
}

//文字流
function createMatrix(params) {
    var clearColor = 'rgba(0, 0, 0, .1)',
        wordColor = '#33ff33',
        words = "0123456789qwertyuiopasdfghjklzxcvbnm,./;'\[]QWERTYUIOP{}ASDFGHJHJKL:ZXCVBBNM<>?",
        wordsArr = words.split(''),
        font_size = 16,
        clumns = c.width / font_size,
        drops = [];
    for(var i = 0; i < clumns; i++) {
        drops[i] = 1;
    }

    function  draw() {
        ctx.save();
        ctx.fillStyle = wordColor;
        ctx.font = font_size + 'px Arail';
        //核心
        for(var i = 0; i < drops.length; i += 1) {
            var text = wordsArr[Math.floor(Math.random() * wordsArr.length)];
            ctx.fillText(text, i * font_size, drops[i] * font_size);
            if(drops[i] * font_size > c.height && Math.random() > .98) {
                drops[i] = 0;
            }
            drops[i] += 1;
        }
        ctx.restore();
    }
    
    (function drawFrame(){
        requestAnimationFrame(drawFrame);
        ctx.fillStyle = clearColor;
        ctx.fillRect(0, 0, c.width, c.height);
        draw();
    })()
}

// createCanvasLoading();
createMatrix();